<template>
  <div>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-table
            border
            :fit="true"
            ref="tableData"
            max-height="700"
            style="width: 100%"
            :data="tableData[1]"
          >
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="number" label="剩余数量"></el-table-column>
            <el-table-column prop="rt_id" label="房间类型" :formatter="rt_id"></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
             <el-table
            border
            :fit="true"
            ref="tableData"
            max-height="700"
            style="width: 100%"
            :data="tableData[2]"
          >
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="number" label="剩余数量"></el-table-column>
            <el-table-column prop="rt_id" label="房间类型" :formatter="rt_id"></el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
             <el-table
            border
            :fit="true"
            ref="tableData"
            max-height="700"
            style="width: 100%"
            :data="tableData[3]"
          >
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="number" label="剩余数量"></el-table-column>
            <el-table-column prop="rt_id" label="房间类型" :formatter="rt_id"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: {
        1: [],
        2: [],
        3: []
      }
    };
  },
  mounted() {
    this.getDateRoomNumber(1);
    this.getDateRoomNumber(2);
    this.getDateRoomNumber(3);
  },
  methods: {
    getDateRoomNumber(e) {
      this.$axios
        .get(
          "/ssms/common/getDateRoomNumber?rt_id=" + e,

          {
            headers: {
              "Content-Type": "application/json",
              responseType: "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.tableData[e] = res.data.obj.date_rt_number;
            console.log(this.tableData[e]);
          }
        });
    },
    rt_id(row) {
      if (row.rt_id == 1) {
        row.type = "双人房";
        return row.type;
      } else if (row.rt_id == 2) {
        row.type = "单人房";
        return row.type;
      } else if (row.rt_id == 3) {
        row.type = "大床房";
        return row.type;
      }
    }
  }
};
</script>

<style>
</style>